<template>
  <div>
    <van-nav-bar
      title="接样"
      left-text="返回"
      left-arrow
      @click-left="onBack"
    ></van-nav-bar>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <div class="detail">
          <div class="item">
            <div class="label">样品类型：</div>
            <div class="value">{{ detailInfo.sampleType }}</div>
          </div>
          <div class="item">
            <div class="label">样品名称：</div>
            <div class="value">{{ detailInfo.sampleDesc }}</div>
          </div>
          <div class="item">
            <div class="label">样品编码：</div>
            <div class="value">{{ detailInfo.sampleCode }}</div>
          </div>

          <template v-if="showAll">
            <div class="item">
              <div class="label">批次号：</div>
              <div class="value">{{ detailInfo.bachNo }}</div>
            </div>
            <div class="item">
              <div class="label">合同号：</div>
              <div class="value">{{ detailInfo.contractNo }}</div>
            </div>

            <div class="item">
              <div class="label">检测项目：</div>
              <div class="value">{{ detailInfo.checkItems }}</div>
            </div>

            <div class="item">
              <div class="label">样品条码：</div>
              <div class="value">{{ detailInfo.sampleBar }}</div>
            </div>

            <div class="item">
              <div class="label">供应商：</div>
              <div class="value">{{ detailInfo.providerName }}</div>
            </div>

            <div class="item">
              <div class="label">样品重量：</div>
              <div class="value">{{ detailInfo.sampleWeight }}</div>
            </div>
            <div class="item">
              <div class="label">重量单位：</div>
              <div class="value">{{ detailInfo.weightUnit }}</div>
            </div>
            <div class="item">
              <div class="label">完成日期：</div>
              <div class="value">{{ detailInfo.sampleCompleteDate }}</div>
            </div>
            <div class="item">
              <div class="label">送样单位：</div>
              <div class="value">{{ detailInfo.sendFactoryId }}</div>
            </div>

            <div class="item">
              <div class="label">送样人：</div>
              <div class="value">{{ detailInfo.sendUserid }}</div>
            </div>

            <div class="item">
              <div class="label">生产工序：</div>
              <div class="value">{{ detailInfo.procedureId }}</div>
            </div>
            <div class="item">
              <div class="label">炉号：</div>
              <div class="value">{{ detailInfo.furnaceNo }}</div>
            </div>

            <div class="item">
              <div class="label">状态：</div>
              <div class="value">
                {{
                  sampleStateOptions.find(
                    (item) => item.key === detailInfo.sampleState
                  ).value || detailInfo.sampleState
                }}
              </div>
            </div>
          </template>
          <div class="arrow">
            <van-icon
              v-if="showAll"
              name="arrow-up"
              @click="showAll = !showAll"
            />
          </div>
          <div class="arrow">
            <van-icon
              v-if="!showAll"
              name="arrow-down"
              @click="showAll = !showAll"
            />
          </div>
        </div>

        <van-field name="isMake" label="是否生成批号：">
          <template #input>
            <van-radio-group v-model="form.isMake" direction="horizontal">
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <!-- <van-field name="isBatch" label="批号生成选择：">
          <template #input>
            <van-radio-group
              v-model="form.isBatch"
              direction="horizontal"
              @change="changeIsBatch"
            >
              <van-radio name="0">自动生成</van-radio>
              <van-radio name="1">手动选择</van-radio>
            </van-radio-group>
          </template>
        </van-field> -->

        <van-field name="isMy" label="是否盲样：">
          <template #input>
            <van-radio-group
              v-model="form.isMy"
              direction="horizontal"
              @change="changeIsMy"
            >
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field name="selectType" label="检验流程：">
          <template #input>
            <van-radio-group
              v-model="form.selectType"
              direction="horizontal"
              @change="changeSelectType"
            >
              <van-radio name="1">直接录入结果</van-radio>
              <van-radio name="2">检验过程</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <!-- <van-field
          v-model="form.sampleNo"
          is-link
          readonly
          name="sampleNo"
          label="选择代号："
          placeholder="选择代号"
          @click="showPicker = true"
          :rules="[{ required: form.isBatch == '1', message: '请选择代号' }]"
        /> -->

        <van-field
          v-model="form.sampleNo"
          is-link
          readonly
          name="sampleNo"
          label="选择代号："
          placeholder="选择代号"
          @click="showPicker = true"
          :rules="[
            {
              required: form.isMy != '1' ? true : false,
              message: '请选择代号',
            },
          ]"
        />

        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker
            :columns="sampleNoList"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          确定接样
        </van-button>
        <!-- <van-button round block type="primary" @click="test">test</van-button> -->
      </div>
    </van-form>
  </div>
</template>

<script>
  import { ref, onMounted, reactive } from 'vue'
  import * as api from '@/api'
  import { showFailToast, showSuccessToast } from 'vant'
  import { useRoute, useRouter } from 'vue-router'
  import fc from 'flutter-core'

  export default {
    setup() {
      const route = useRoute()
      const router = useRouter()

      const form = reactive({
        isMake: '1',
        isBatch: '1',
        isMy: '0',
        selectType: '2',
        sampleNo: '',
      })

      const detailInfo = ref({})
      const onBack = () => router.push('/')

      const sampleNoList = ref([])

      const showPicker = ref(false)
      const showAll = ref(false)
      const onSubmit = (values) => {
        let selection = []
        selection.push(detailInfo.value)

        let param = {
          params: {
            selection,
            strMarkCode: values.isMy == '1' ? 'MY' : values.sampleNo,
            isMake: values.isMake,
            selectType: values.selectType,
          },
        }
        api.sampleAccept(param).then((res) => {
          if (res.data.code == '200' && res.data.state) {
            showSuccessToast(res.data.message)
          } else {
            showFailToast(res.data.message)
          }
        })
      }
      //样品状态
      const sampleStateOptions = [
        { key: '0', value: '退回' },
        { key: '1', value: '待接样' },
        { key: '2', value: '已接样' },

        { key: '3', value: '部门分配' },
        { key: '4', value: '班组分配' },
        { key: '5', value: '已检' },
        { key: '6', value: '审核中' },
        { key: '7', value: '审核完毕' },
        { key: '9', value: '已分配' },
      ]

      const onConfirm = ({ selectedOptions }) => {
        form.sampleNo = selectedOptions[0]?.value
        showPicker.value = false
      }

      const changeIsMy = (val) => {
        if (val == '1') {
          form.isBatch = ''
        }
      }

      const changeIsBatch = (val) => {
        if (val == '1' || val == '0') {
          form.isMy = '0'
          form.selectType = '2'
        }
      }
      const changeSelectType = (val) => {
        if (val == '1') {
          form.isBatch = ''
        }
      }

      onMounted(() => {
        const sampleCode = route.query.sampleCode
        //XK09-210108-04

        if (sampleCode) {
          api.getSampleInfo(sampleCode).then((res) => {
            if (res.data.rows[0]) {
              detailInfo.value = res.data.rows[0]
            } else {
              showFailToast({
                message: '未找到相关数据',
                duration: 2500,
              })
            }
          })
        }

        api.getSampleNoList().then((res) => {
          sampleNoList.value = res.data.value.rows.map((item) => ({
            text: item.sampleNo,
            value: item.sampleNo,
          }))
        })
      })

      fc.await('scanner', (res) => {
        if (res) {
          detailInfo.value = {}

          form.value = {
            isMake: '1',
            isBatch: '1',
            isMy: '0',
            selectType: '1',
            sampleNo: '',
          }
          api.getSampleInfo(res).then((res) => {
            if (res.data.rows[0]) {
              detailInfo.value = res.data.rows[0]
            } else {
              showFailToast({
                message: '未找到相关数据',
                duration: 2500,
              })
            }
          })
        }
      })

      // const test = () => {
      //   let res = 'XK03-210107-04'
      //   if (res) {
      //     detailInfo.value = {}
      //     ;(form.isMake = '1'),
      //       (form.isBatch = '1'),
      //       (form.isMy = '0'),
      //       (form.selectType = '2'),
      //       (form.sampleNo = '')

      //     api.getSampleInfo(res).then((res) => {
      //       if (res.data.rows[0]) {
      //         detailInfo.value = res.data.rows[0]
      //       } else {
      //         showFailToast({
      //           message: '未找到相关数据',
      //           duration: 2500,
      //         })
      //       }
      //     })
      //   }
      // }

      return {
        detailInfo,
        showPicker,
        form,
        onSubmit,
        onConfirm,
        showAll,
        sampleStateOptions,
        sampleNoList,
        changeIsMy,
        changeIsBatch,
        changeSelectType,
        onBack,
        //test,
      }
    },
  }
</script>

<style scoped>
  ::v-deep .van-field__label {
    width: 8em;
  }

  .detail {
    background-color: white;
    margin: 1em;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid #323232;
    border-radius: 3px;
  }

  .detail .item {
    display: flex;
    flex-wrap: wrap;
    color: #323232;
    font-size: 14px;
  }

  .van-icon-arrow-down,
  .van-icon-arrow-up {
    color: #1989fa;
    font-size: 24px;
  }

  .arrow {
    text-align: center;
  }
</style>
